<template>
  <!-- 模块1 -->
  <view class="d-flex">
    <view class="ml-2" style="width:70%">
      <nut-cell
        :showIcon="true"
        title="选择日期"
        :desc="date ? `${date[0]}至${date[1]}` : '请选择'"
        @click="openSwitch"
      >
      </nut-cell>
      <nut-calendar
        v-model:visible="isVisible"
        :default-value="date"
        type="range"
        :start-date="START_DATA"
        :end-date="null"
        @close="closeSwitch"
        @choose="setChooseValue"
      >
      </nut-calendar>
    </view>

    <view class="pl-2" style="width:20%;overflow: hidden;">
      <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet">
        <div v-html="shopStore"></div>
      </nut-cell>
    </view>
    <view class="mt-2 pl-1p pt-1 pl-1" style="width:10%;" @click="check">
      <nut-icon size="18" name="scan2" color="#26BF26"></nut-icon
    ></view>
    <nut-actionsheet
      style="padding-bottom:100px"
      v-model:visible="isVisibleStore"
      :menu-items="menuItems"
      @choose="chooseItem"
    >
    </nut-actionsheet>
  </view>
  <!-- 模块2 -->
  <view>
    <view class="fs-lg ml-2 py-1">经营情况</view>
    <view class="fs-sm d-flex flex-wrap text-center">
      <view style="width:25%" v-for="(item, index) in businessList" :key="index">
        <view class="text-green">{{ item.value }}</view>
        <view>{{ item.label }}</view>
      </view>
    </view>
  </view>
  <!-- 模块3 -->
  <view class="fs-lg ml-2 py-1">
    <view style="width:70%">
      <nut-cell
        :showIcon="true"
        title="选择单个日期"
        :desc="bookDate ? bookDate : '请选择'"
        @click="openSwitchbook"
      >
      </nut-cell>
      <nut-calendar
        v-model:visible="bookIsVisible"
        @close="closeSwitchbook"
        @choose="setChooseValuebook"
        :default-value="bookDate"
        :start-date="START_DATA"
        :end-date="null"
        :is-auto-back-fill="true"
      >
      </nut-calendar>
    </view>
    <view>预约情况</view>
    <view>
      <view class="pl-1 text-blue">上午</view>
      <view class="d-flex flex-wrap text-center">
        <view
          class="fs-md time-border ml-1 mt-1 "
          style="width:46%"
          v-for="(item, index) in bookList.slice(0, 5)"
          :key="index"
        >
          <view class="d-flex"
            ><view class="w-50">{{ item.timePoint }}</view
            ><view class="w-50">订单：{{ item.orderNum }}</view></view
          >
          <view class="d-flex"
            ><view class="w-50 ">完成度</view
            ><view class="w-50 text-red">{{ item.finishNum }}/{{ item.unFinishNum }}</view></view
          >
        </view>
      </view>
      <view class="pt-1 pl-1 text-blue">下午</view>
      <view class="d-flex flex-wrap text-center">
        <view
          class="fs-md time-border ml-1 mt-1 "
          style="width:46%"
          v-for="(item, index) in bookList.slice(5, 10)"
          :key="index"
        >
          <view class="d-flex"
            ><view class="w-50">{{ item.timePoint }}</view
            ><view class="w-50">订单：{{ item.orderNum }}</view></view
          >
          <view class="d-flex"
            ><view class="w-50">完成度</view
            ><view class="w-50 text-red">{{ item.finishNum }}/{{ item.unFinishNum }}</view></view
          >
        </view>
      </view>
      <view class="pl-1 pt-1 text-blue">晚上</view>
      <view class="d-flex flex-wrap text-center">
        <view
          class="fs-md time-border ml-1 mt-1 "
          style="width:46%"
          v-for="(item, index) in bookList.slice(10, 15)"
          :key="index"
        >
          <view class="d-flex"
            ><view class="w-50">{{ item.timePoint }}</view
            ><view class="w-50">订单：{{ item.orderNum }}</view></view
          >
          <view class="d-flex"
            ><view class="w-50">完成度</view
            ><view class="w-50  text-red">{{ item.finishNum }}/{{ item.unFinishNum }}</view></view
          >
        </view>
      </view>
    </view>
  </view>
  <view style="height: 50px;"> </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, toRaw } from 'vue'
import Taro from '@tarojs/taro'
import dayjs from 'dayjs'
import { useStore } from '@/stores'
import { getMonthStartDate } from '@/utils/dataUtil.js'
import constData from '@/config/const'
import type { Istore } from '@/common/interface'

import { getOverviewBusiness, getOverviewBooking } from '@/services/apis/overview'

// import { storeToRefs } from 'pinia'

const auth = useStore('auth')

onMounted(() => {
  getbusinessList()
  getOverviewList()
})

const { START_DATA } = constData

const data = computed(() => toRaw(auth.store)).value
const menuItems: [Istore] = data.map(ele => {
  return { name: ele.storeName, id: ele.id }
})
// console.log(menuItems, 'store')
const shopStore = ref(menuItems[0].name)
const initStoreId =  toRaw(ref(menuItems[0].id)).value
const isVisibleStore = ref(false)

const endDay = dayjs(Date.now() - 8.64e6).format('YYYY-MM-DD')
const startDay = getMonthStartDate()
console.log(startDay, 'startDay')

const date = ref([startDay, endDay])

let isVisible = ref(false)

const bookDate = ref(endDay)
const bookIsVisible= ref(false)

let businessList =ref<any>([])
let businessListParams = {
  storeID:initStoreId,
  beginTime:dayjs(startDay).unix(),
  endTime: dayjs(endDay).unix(),
}

let bookList = ref<any>([])

let bookListParams = {
  storeID:initStoreId,
  date:dayjs(bookDate.value).unix(),
}


const openSwitch = () => {
  isVisible.value = true
}
const closeSwitch = () => {
  isVisible.value = true
}
const setChooseValue = param => {
  date.value = [...[param[0][3], param[1][3]]]
  // console.log(dayjs(toRaw(param[0][3])).unix())
  // console.log(dayjs(toRaw(param[1][3])).unix())
  businessListParams.beginTime = dayjs(toRaw(param[0][3])).unix()
  businessListParams.endTime = dayjs(toRaw(param[1][3])).unix()
  getbusinessList()
}

//门店
// const store = computed(() => auth.store)
// console.log(store.value, 'store')

const switchActionSheet = () => {
  isVisibleStore.value = !isVisibleStore.value
}
const chooseItem = itemParams => {
  console.log(itemParams)
  shopStore.value = itemParams.name
  businessListParams.storeID = itemParams.id
  getbusinessList()
  getOverviewList()
}

//选择单个日期

const openSwitchbook = () => {
  bookIsVisible.value= true;
};
const closeSwitchbook = () => {
  bookIsVisible.value= false;
};
  const setChooseValuebook = param => {
  bookDate.value= param[3];

  console.log(bookDate.value,'bookDate.value=')
  bookListParams.date = dayjs(toRaw(param[3])).unix()
  getOverviewList()
};

//去请求 销售信息
const getbusinessList= async() =>{
  const {data} =await getOverviewBusiness(businessListParams)
  const arr = [{
    label:"实际收入",
    value:data.realIncome
  },{
    label:"预计收入",
    value:data.preIncome
  },{
    label:"全部订单",
    value:data.totalOrderCounts
  },{
    label:"待拍摄",
    value:data.createdOrderCounts
  },{
    label:"拍摄中",
    value:data.shootingOrderCounts
  },{
    label:"已完成",
    value:data.closedOrderCounts
  },{
    label:"已取消",
    value:data.canceledOrderCounts
  }]
  businessList.value= arr
  console.log(toRaw(businessList.value),'realIncome')
}
//去请求 预约信息
const getOverviewList= async() =>{
  const {data} =await getOverviewBooking(bookListParams)
  console.log(data)
  bookList.value =data.list
}

const check = ()=>{
 Taro.navigateTo({ url: '/pages/check/index' })
}
</script>

<style lang="scss">
.time-border {
  width: 50%;
  border: 1px solid #f1f1f1;
}
</style>
